---
type: tutorial
title: Stylisez votre page À propos
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Ajouter une balise de style Astro pour une mise en forme localisée sur la page
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez une page "À propos" avec du contenu vous concernant, stylisons-la !

<PreCheck>
  - Styliser des éléments sur une seule page
  - Utiliser des variables CSS
</PreCheck>


## Styliser une page individuelle

En utilisant les balises `<style></style>` d'Astro, vous pouvez styliser des éléments sur votre page. Ajouter des **attributs** et des **directives** à ces balises vous offre encore plus de possibilités de mise en forme.

<Steps>
1. Copiez le code suivant et collez-le dans `src/pages/about.astro` :

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 

    ```

    Vérifiez les trois pages dans l'aperçu de votre navigateur.
    
    - De quelle couleur est le titre de :

        - Votre page d'accueil ?  <Spoiler>noir</Spoiler>
        - Votre page À propos ? <Spoiler>violet</Spoiler>
        - Votre page de blog ? <Spoiler>noir</Spoiler>

    - La page avec le plus grand texte de titre est ? <Spoiler>Votre page À propos</Spoiler>

    :::tip
    Si vous ne parvenez pas à déterminer les couleurs visuellement, vous pouvez utiliser les outils de développement de votre navigateur pour inspecter les éléments de titre `<h1>` et vérifier la couleur du texte appliquée.
    :::

2. Ajoutez le nom de classe `skill` aux éléments `<li>` générés sur votre page À propos, pour que nous puissions les styliser. Votre code devrait ressembler à ceci :

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>Mes compétences sont :</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. Ajoutez le code suivant à votre balise de style existante :

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```



  4. Visitez à nouveau votre page À propos dans votre navigateur et vérifiez, par inspection visuelle ou avec les outils de développement, que chaque élément de votre liste de compétences est maintenant vert et en gras.
</Steps>

## Utilisez votre première variable CSS
La balise `<style>` d'Astro peut également référencer toutes les variables de votre script du frontmatter en utilisant la directive `define:vars={ {...} }`. Vous pouvez **définir des variables dans vos barres de code**, puis les **utiliser comme variables CSS dans votre balise de style**.

<Steps>
1. Définissez une variable `skillColor` en l'ajoutant au script du frontmatter de `src/pages/about.astro` comme ceci :

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "À propos de moi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Rédactrice technique",
      hobbies: ["photographie", "observation des oiseaux", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "navy";
    ---
    ```

2. Mettez à jour votre balise `<style>` existante ci-dessous pour d'abord définir, puis utiliser cette variable `skillColor` à l'intérieur de doubles accolades.

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. Vérifiez votre page À propos dans votre aperçu de navigateur. Vous devriez voir que les compétences sont maintenant d'un bleu marine, tel que défini par la variable `skillColor` transmise à la directive `define:vars`.
</Steps>

<Box icon="puzzle-piece">

## Essayez par vous-même - Définissez des variables CSS

  <Steps>
  1. Mettez à jour la balise `<style>` sur votre page À propos pour qu'elle corresponde à celle ci-dessous.
  
      ```astro title="src/pages/about.astro"
      <style define:vars={{skillColor, fontWeight, textCase}}>
        h1 {
          color: purple;
          font-size: 4rem;
        }
        .skill {
          color: var(--skillColor);
          font-weight: var(--fontWeight);
          text-transform: var(--textCase);
        }
      </style>
      ```
  
  2. Ajoutez les définitions de variables manquantes dans votre script du frontmatter pour que votre nouvelle balise `<style>` applique avec succès ces styles à votre liste de compétences :
      - La couleur du texte est le bleu marine
      - Le texte est en gras
      - Les éléments de la liste sont en majuscules (lettres capitales)
 </Steps>
<details>
<summary>✅ Montrez-moi le code ! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "À propos de moi";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Rédactrice technique",
  hobbies: ["photographie", "observation des oiseaux", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>



<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux ajouter des styles CSS à une page individuelle en utilisant une balise `<style>` Astro.
- [ ] Je peux utiliser des variables pour styliser des éléments sur la page.
</Checklist>
</Box>

### Ressources
- [Comparaison entre la syntaxe d'Astro et JSX](/fr/basics/astro-syntax/#différences-entre-astro-et-jsx)

- [Balise `<style>` Astro](/fr/guides/styling/#styliser-avec-astro)

- [Variables CSS dans Astro](/fr/guides/styling/#variables-css)
